<script setup></script>
<template>
  <footer class="bg-white z-1 relative overflow-hidden" style="border-top: 1px solid #e8eaf2">
    <div
      class="flex text-sm justify-between flex-row items-center max-w-[1232px] mx-auto px-4 py-5 relative lg:pb-12 lg:justify-center lg:flex-col lg:gap-3"
    >
      <div class="flex items-center gap-[30px] flex-row lg:gap-4 sm:gap-2 mt-8">
        <a title="logo" class="flex items-center"
          ><svg width="94" height="29" viewBox="0 0 94 29" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-[#375375]">
            <path
              d="M0 4.95A4.102 4.102 0 0 1 4.102.85h9.57c7.552 0 13.674 6.121 13.674 13.672v9.571a4.102 4.102 0 0 1-4.102 4.102h-9.571C6.12 28.194 0 22.073 0 14.521v-9.57Z"
              fill="#01CEB2"
            ></path>
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M4.102 13.838a5.47 5.47 0 0 1 5.469-5.47h8.38a5.293 5.293 0 0 1 2.834 9.763L14.6 22.053a.456.456 0 0 1-.7-.385V20.51c0-.664-.538-1.203-1.203-1.203H9.571a5.47 5.47 0 0 1-5.47-5.47Zm6.836 0a1.823 1.823 0 1 1-3.646 0 1.823 1.823 0 0 1 3.646 0Zm7.293 1.823a1.823 1.823 0 1 0 0-3.646 1.823 1.823 0 0 0 0 3.646Z"
              fill="#fff"
            ></path>
            <path
              d="M32.473 22.938V6.062h3.567v6.963h7.243V6.062h3.56v16.876h-3.56v-6.971H36.04v6.971h-3.567ZM52.523 6.062v16.876h-3.568V6.062h3.568ZM57.974 6.062l3.403 5.752h.132l3.42-5.752h4.028l-5.15 8.438 5.266 8.438H64.97l-3.46-5.76h-.133l-3.46 5.76H53.83l5.281-8.438-5.182-8.438h4.045ZM76.593 22.938H72.77l5.825-16.876h4.598l5.817 16.876h-3.823L80.96 9.918h-.132l-4.235 13.02Zm-.239-6.633h9.03v2.785h-9.03v-2.785ZM93.78 6.062v16.876h-3.568V6.062h3.568Z"
              fill="currentColor"
            ></path></svg
        ></a>
        <p class="lg:text-center xs:text-xs">
          ©
          <!-- -->2025<!-- -->
          HIX.AI<!-- -->
          <span class="ps-2">15 SCOTTS ROAD #03-12 15 SCOTTS SINGAPORE 228218</span>
        </p>
      </div>
      <div style="display: grid; grid-auto-flow: column; gap: 10px; cursor: pointer">
        <div class="hover:text-primary break-words whitespace-normal block" @click="$router.push({ path: '/about' })">关于我们</div>

        <el-tooltip class="box-item" effect="dark" content="1594574183@qq.com" placement="top-start">
          <div class="hover:text-primary break-words whitespace-normal block">联系我们</div>
        </el-tooltip>

        <div class="hover:text-primary break-words whitespace-normal block" @click="$router.push({ path: '/privacy' })">隐私策略</div>
        <div class="hover:text-primary break-words whitespace-normal block" @click="$router.push({ path: '/termsOfService' })">
          条款和条件
        </div>
        <div class="hover:text-primary break-words whitespace-normal block" @click="$router.push({ path: '/refundPolicy' })">退款政策</div>
      </div>
    </div>
  </footer>
</template>

<style lang="less" scoped>
*,
:after,
:before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--ux-color-border) / 1);
}
*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

footer {
  display: block;
  unicode-bidi: isolate;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.border-t {
}
.overflow-hidden {
  overflow: hidden;
}
.relative {
  position: relative;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.justify-between {
  justify-content: space-between;
}
.max-w-\[1232px\] {
  max-width: 1232px;
}
.flex {
  display: flex;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.relative {
  position: relative;
}
.gap-\[30px\] {
  gap: 30px;
}
.items-center {
  align-items: center;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.flex {
  display: flex;
}
.ps-2 {
  padding-inline-start: 0.5rem;
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  --ux-primary: 58 126 255;
  color: rgb(var(--ux-primary) / var(--tw-text-opacity, 1));
}
</style>
